<template>
  <div class="main">
     <van-nav-bar>
      <template #left>
        <i class="iconfont icon-zuojiantou" style="font-size:0.5rem; color:#ffffff" @click="goMore"></i>
        <span style="color:#ffffff;margin-left:5px">机构选择</span>
      </template>
      <template #right>
        <van-icon name="location-o" size="18" color="#fff5f6" />
      </template>
    </van-nav-bar>
       <van-search placeholder="请输入搜索关键词" />
       <div class="content">
        <van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="option1"/>    
        </van-dropdown-menu>
        <van-dropdown-menu>
            <van-dropdown-item v-model="value2" :options="option2"/>
        </van-dropdown-menu>
       </div>     
   </div>
</template>

<script>
export default {
     data() {
    return {
      value1: 0,
      value2: 'a',
      option1: [
        { text: '北京热力集团', value: 0 },
        { text: '武汉热力集团', value: 1 },
        { text: '南京热力集团', value: 2 },
      ],
      option2: [
        { text: '北京科利源热电有限公司', value: 'a' },
        { text: '武汉热力供电有限公司', value: 'b' },
        { text: '南京热力供给有限公司', value: 'c' },
      ],
    };
  },
  methods: {
    goMore(){
      this.$router.push({path: "/more"})
    }
  },
}
</script>
<style lang="less" scoped>
    .van-nav-bar {
  background: #ff5555;
  
}
/deep/.van-nav-bar__left{
  padding: 0 5px;
}
/deep/.van-nav-bar .van-icon {
    color: #fff5f6;
    
}
/deep/.van-nav-bar__text {
    color: #fff5f6;
}
    .van-dropdown-menu{
        margin: 10px 5px;
    }
    /deep/.van-dropdown-menu__title::after {
    border: none;
    content: '';
    }
</style>